<!DOCTYPE html>
<html>

<head>
    <title>Payment Form Widget Flat Responsive Widget Template :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Payment Form Widget Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
    Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
            function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="../../css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href='//fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
    <link
        href='//fonts.googleapis.com/css?family=Alegreya+Sans:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,800,800italic,900,900italic'
        rel='stylesheet' type='text/css'>
    <link
        href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
        rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>

</head>

<body>
    <script src='../../js/easyResponsiveTabs.js' type='text/javascript'>
        $(document).ready(function () {
            window.alert('hi');
            $('#horizontalTab').easyResponsiveTabs({
                type: 'default',
                width: 'auto',
                fit: true
            });
        })
    </script>
    <div class="sap_tabs">
        <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
            <div class="pay-tabs">
                <h2>지불 수단</h2>
                <ul class="resp-tabs-list">
                    <li class="resp-tab-item resp-tab-active" aria-controls="tab_item-0" role="tab"><span><label
                                class="pic1"></label>신용카드</span></li>
                    <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span><label
                                class="pic3"></label>인터넷 뱅킹</span></li>
                    <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span><label
                                class="pic4"></label>페이팔</span></li>
                    <li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span><label
                                class="pic2"></label>체크카드</span></li>
                    <div class="clear"></div>
                </ul>
            </div>

            <div class="resp-tabs-container">
                <div class="tab-1 resp-tab-content resp-tab-content-active" aria-labelledby="tab_item-0"
                    style="display:block">
                    <div class="payment-info">
                        <br><br>
                        <h3>금액</h3>
                        <form>
                            <div class="tab-for">
                                <div class="payment-info">
                                    <div class="radio-btns">
                                        <div class="swit">
                                            <div class="check_box">
                                                <div class="radio"> <label><input type="radio" name="radio"
                                                            checked=""><i></i>10,000원</label> </div>
                                            </div>
                                            <div class="check_box">
                                                <div class="radio"> <label><input type="radio"
                                                            name="radio"><i></i>50,000원</label> </div>
                                            </div>
                                        </div>
                                        <div class="swit">
                                            <div class="check_box">
                                                <div class="radio"> <label><input type="radio" name="radio"
                                                            checked=""><i></i>30,000원</label> </div>
                                            </div>
                                            <div class="check_box">
                                                <div class="radio"> <label><input type="radio"
                                                            name="radio"><i></i>100,000원</label> </div>
                                            </div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <h3 class="pay-title">신용카드 정보</h3>
                        <form>
                            <div class="tab-for">
                                <h5>카드이름</h5>
                                <input type="text" value="">
                                <h5>카드번호</h5>
                                <input class="pay-logo" type="text" value="0000-0000-0000-0000"
                                    onfocus="this.value = '';"
                                    onblur="if (this.value == '') {this.value = '0000-0000-0000-0000';}" required="">
                            </div>
                            <div class="transaction">
                                <div class="tab-form-left user-form">
                                    <h5>유효기간</h5>
                                    <ul>
                                        <li>
                                            <input type="number" class="text_box" type="text" value="6" min="1" />
                                        </li>
                                        <li>
                                            <input type="number" class="text_box" type="text" value="1988" min="1" />
                                        </li>

                                    </ul>
                                </div>
                                <div class="tab-form-right user-form-rt">
                                    <h5>CVV 번호</h5>
                                    <input type="text" value="xxxx" onfocus="this.value = '';"
                                        onblur="if (this.value == '') {this.value = 'xxxx';}" required="">
                                </div>
                                <div class="clear"></div>
                            </div>
                            <input type="submit" value="결제"">
                                                    </form>
                                                    <div class=" single-bottom">
                            <ul>
                                <li>
                                    <input type="checkbox" id="brand" value="">
                                    <label for="brand"><span></span>이 체크박스를 선택하면 이용 약관 및 개인 정보 취급 방침에
                                        동의합니다.</label>
                                </li>
                            </ul>
                    </div>
                </div>
            </div>
            <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
                <div class="payment-info">
                    <h3>은행</h3>
                    <div class="radio-btns">
                        <div class="swit">
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"
                                            checked=""><i></i>KB국민은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>우리은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>신한은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>KEB하나은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>IBK기업은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>SC제일은행</label> </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>씨티은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>케이뱅크</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>카카오뱅크</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>NH농협</label>
                                </div>
                            </div>
                        </div>
                        <div class="swit">
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"
                                            checked=""><i></i>우체국예금</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>수협은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>KDB산업은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>부산은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>대구은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>경남은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>광주은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>전북은행</label>
                                </div>
                            </div>
                            <div class="check_box">
                                <div class="radio"> <label><input type="radio" name="radio"><i></i>제주은행</label>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <a href="#">Continue</a>
                </div>
            </div>
            <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
                <div class="payment-info">
                    <h3>페이팔</h3>
                    <h4>페이팔 계정을 가지고 계십니까?</h4>
                    <div class="login-tab">
                        <div class="user-login">
                            <h2>Login</h2>

                            <form>
                                <input type="text" value="name@email.com" onfocus="this.value = '';"
                                    onblur="if (this.value == '') {this.value = 'name@email.com';}" required="">
                                <input type="password" value="PASSWORD" onfocus="this.value = '';"
                                    onblur="if (this.value == '') {this.value = 'PASSWORD';}" required="">
                                <div class="user-grids">
                                    <div class="user-left">
                                        <div class="single-bottom">
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id="brand1" value="">
                                                    <label for="brand1"><span></span>기억하시겠습니까?</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="user-right">
                                        <input type="submit" value="LOGIN">
                                    </div>
                                    <div class="clear"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
                <div class="payment-info">

                    <h3 class="pay-title">체크카드 정보</h3>
                    <form>
                        <div class="tab-for">
                            <h5>카드이름</h5>
                            <input type="text" value="">
                            <h5>카드번호</h5>
                            <input class="pay-logo" type="text" value="0000-0000-0000-0000" onfocus="this.value = '';"
                                onblur="if (this.value == '') {this.value = '0000-0000-0000-0000';}" required="">
                        </div>
                        <div class="transaction">
                            <div class="tab-form-left user-form">
                                <h5>유효기간</h5>
                                <ul>
                                    <li>
                                        <input type="number" class="text_box" type="text" value="6" min="1" />
                                    </li>
                                    <li>
                                        <input type="number" class="text_box" type="text" value="1988" min="1" />
                                    </li>

                                </ul>
                            </div>
                            <div class="tab-form-right user-form-rt">
                                <h5>CVV 번호</h5>
                                <input type="text" value="xxxx" onfocus="this.value = '';"
                                    onblur="if (this.value == '') {this.value = 'xxxx';}" required="">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <input type="submit" value="결제">
                    </form>
                    <div class="single-bottom">
                        <ul>
                            <li>
                                <input type="checkbox" id="brand" value="">
                                <label for="brand"><span></span>이 체크박스를 선택하면 이용 약관 및 개인 정보 취급 방침에 동의합니다.</label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>